<template>
  <div class="breakthrough-main">
    <div class="reward-main active">
      <div class="rewards"> </div>
    </div>
    <div class="awards-los active" @touchend.stop="backTouch"></div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  props: ['questionIndex', 'activeIndex', "assignment"],
  data() {
    return {
      point: false,
    }
  },
  computed: {
    ...mapGetters("packStatus", {
      reward: "getReward"
    })
  },
  created() {
    setTimeout(() => {
      if (!this.point) this.backTouch()
    }, 4000)
  },
  methods: {
    backTouch: function () {
      this.point = true
      this.touchMusic()
      this.deleteReward()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/picbook", query: { index: this.$route.query.index, beforeRouter: this.$route.query.beforeRouter } })
        }
      })
    },
    ...mapActions("assignmentStatus", ["deleteReward"]),
    ...mapActions("mainStatus", ["setLoading"])
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../src/common/stylus/base.styl'
.breakthrough-main
  position fixed
  width 100%
  height 100%
  background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png') 0 0 / 100% 100%
  z-index 99
  .active
    opacity 0
    transform scale(0)
    animation bounce-recCard 1s
    animation-fill-mode forwards
  .reward-main
    position absolute
    $center('WHLT', 22rem, 24rem)
    margin-top -15rem
    background url($urlTitle + 'assignment/image/breakthrough/回答错误-背景.png') center center / contain no-repeat
    .rewards
      position absolute
      $center('WHLT', 14rem, 10rem)
      margin-top -2.5rem
      background url($urlTitle + 'assignment/image/breakthrough/回答错误-文字示意.png') center center / contain no-repeat
  .awards-los
    position absolute
    $center('WHLT', 8rem, 5rem)
    margin-top 5rem
    background url($urlTitle + 'assignment/image/breakthrough/回答错误-返回阅读.png') center center / contain no-repeat
</style>
